<template>
  <div class="home-recommend" id="recommend">
    <div class="box">
      <div class="items">
        <div class="item"
        v-for="item in items"
         :key="item.id"
         @click="clickItem(item.id)">
          <img class="med" v-lazy="item.pic" alt="" />
          <div class="item-info">
            <h5 class="name"> {{item.name}} </h5>
            <div class="acion">
              <p class="price">￥{{ item.minPrice }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true
    }
  },
  methods: {
    clickItem (id) {
      this.$emit('clickItem', { id })
    }
  }
}

</script>

<style lang="scss" scoped>
#adv {
  width: 100%;
  height: 99px;
  margin-bottom: 4.5px;
}
.items {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}
.item {
  width: 184px;
  height: 180px;
  background-color: white;
  margin-right: 3px;
  margin-bottom: 5px;
  text-align: center;
}
.med {
  width: 120px;
  height: 120px;
  margin-top: 6px;
  margin-bottom: 8px;
}
h5 {
  font-size: 13px;
}
.price {
  font-size: 14px;
  color: #e60000;
  margin-left: 12px;
  text-align: left;
}
span {
  color: #999;
  text-decoration: line-through;
  margin-left: 9px;
}
</style>
